<!--
 * @Author: LHL
 * @Date: 2022-10-12 11:20:51
 * @LastEditTime: 2022-10-16 17:56:13
 * @LastEditors: lhl
 * @Description:  个人信息页面 
 * @FilePath: \新建文件夹 (2)\jep-training-trinity-group\briup-ui\src\pages\owner\index.vue
 * 别乱动！
-->
<template>
  <div>
    <!-- 个人信息表单开始 -->
    <el-form>
      <!-- {{current_d}} -->
      <el-form-item label="用户头像:" style="height: 70px; margin-top: 40px;">
        <!-- {{current_d}}{{userId}} -->
        <el-image :src="current_d.userFace" alt="加载失败" style="width:100px;height: 90px; margin-top: -30px;"></el-image>
        <template>
          <el-button @click="toChangeUserface" type="text" style="float: right; padding: 10px;">修改个人头像</el-button>
        </template>
      </el-form-item>
      <hr>
      <el-form-item label="登录用户:">
        {{current_d.username}}
      </el-form-item>
      <el-form-item label="用户姓名:">
        {{current_d.realname}}
      </el-form-item>
      <el-form-item label="用户手机:">
        {{current_d.telephone}}
      </el-form-item>
      <el-form-item label="用户性别:">
        <el-tag v-if="current_d.gender=='male'">男 <i class="el-icon-male"></i></el-tag>
        <el-tag v-else-if="current_d.gender=='female'" type="danger">女 <i class="el-icon-female "></i></el-tag>
        <el-tag v-else>未知 <i class="info"></i></el-tag>
      </el-form-item>
      <el-form-item label="用户角色:">
        {{current_d.roles[0].name}}
      </el-form-item>
      <el-form-item label="用户生日:">
        {{current_d.birth | fmtDate}}
      </el-form-item>
      <el-form-item label="注册时间:">
        {{current_d.registerTime | fmtDate}}
      </el-form-item>
      <el-form-item label="邮箱:">
        <el-tag v-if="current_d.email!=''">{{current_d.email}}</el-tag>
        <el-tag v-else type="warning">暂无数据</el-tag>
      </el-form-item>
      <el-form-item label="用户状态:">
        <el-tag type="success" v-if="current_d.status=='正常'">正常</el-tag>
        <el-tag type="danger" v-else>禁用</el-tag>

      </el-form-item>
      <hr>
      <template>
        <el-button @click="toUpdate" type="text" style="float: right; padding: 10px;">修改个人信息</el-button>
      </template>
    </el-form>
    <!-- 个人信息表单开始 -->
    <!-- 头像模态框开始 -->
    <el-dialog title="修改头像" :visible.sync="userfaceFormVisible">
      <el-form :model="userfaceForm" :rules="userfaceRules" ref="myUserfaceForm">
        <el-form-item label="头像" label-width="200px" prop="userface">
          <el-upload class="avatar-uploader" :action="uploadFileURL" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetUserfaceForm('myUserfaceForm')">取 消</el-button>
        <el-button type="primary" @click="submitUserfaceForm('myUserfaceForm')">提 交</el-button>
      </div>
    </el-dialog>
    <!-- 头像模态框结束 -->
    <!-- 个人信息模态框开始 -->
    <el-dialog title="修改个人信息" :visible.sync="visible" @close="close()">
      <el-form :model="form" :rules="rules" ref="myform">
        <el-form-item label="登录用户" :label-width="formLabelWidth">
          <el-input v-model="form.username" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth" prop="realname">
          <el-input v-model="form.realname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth" prop="gender">
          <template>
            <el-radio v-model="form.gender" label="male">男</el-radio>
            <el-radio v-model="form.gender" label="female">女</el-radio>
          </template>
        </el-form-item>
        <el-form-item label="用户手机" :label-width="formLabelWidth" prop="telephone">
          <el-input v-model="form.telephone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户邮箱" :label-width="formLabelWidth" prop="email">
          <el-input v-model="form.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="出生日期" :label-width="formLabelWidth" prop="birth">
          <template>
            <el-date-picker v-model="form.birth" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="timestamp">
            </el-date-picker>
          </template>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('myform')">重 置</el-button>
        <el-button type="primary" @click="submitForm('myform')">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 个人信息模态框结束 -->
  </div>
</template>

<script>
import { alterUserface } from '@/api/user'
import { fmtDate } from '@/filters'
import { mapGetters } from 'vuex'
import { uploadFileURL } from '@/utils/config'
export default {
  data() {
    return {
      formLabelWidth: '120px',
      visible: false,
      uploadFileURL,
      imageUrl: '',
      userfaceFormVisible: false,
      form: {},
      userfaceForm: {},
      userfaceRules: {
        // userface: [{ required: true, message: '请上传头像', trigger: 'change' }]
      },
      rules: {
        realname: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
        gender: [{ required: true, message: '请选择性别', trigger: 'blur' }]
      }
    }
  },
  computed: {
    ...mapGetters(['userId', 'current_d', 'updateDetails'])
  },
  methods: {
    // 修改头像按钮
    toChangeUserface() {
      this.userfaceFormVisible = true
      this.userfaceForm.userface = this.current_d.userFace
      this.imageUrl = this.current_d.userFace
    },
    // 头像框重置按钮
    resetUserfaceForm() {
      this.userfaceFormVisible = false
    },
    // 头像框提交按钮
    submitUserfaceForm() {
      console.log(this.userId, this.userfaceForm)
      if (this.current_d.userFace != this.imageUrl) {
        this.$refs.myUserfaceForm.validate(async valid => {
          if (valid) {
            // console.log(this.userfaceForm)
            this.userfaceFormVisible = false
            let res = await alterUserface({ id: this.userId, userface: this.userfaceForm.userface })
            this.$store.dispatch('user/findUserById', { id: this.userId })
          } else {
            return false
          }
        })
      } else {
        console.log('请无上传同一张头像')
        this.userfaceFormVisible = false
      }
      this.userfaceForm = {}
    },
    // 图片上传成功回调
    handleAvatarSuccess(res, file) {
      console.log('上传了')
      this.imageUrl = URL.createObjectURL(file.raw)
      this.userfaceForm.userface = res.data
    },
    //图片上传之前大小判断
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    // 重置按钮
    resetForm() {
      this.$refs.myform.resetFields()
    },
    submitForm() {
      this.$refs.myform.validate(async valid => {
        if (valid) {
          console.log(this.form)
          this.$store.dispatch('user/saveOrUpdate', this.form)
          this.$store.dispatch('user/findUserById', { id: this.userId })
          this.visible = false
        } else {
          return false
        }
      })
      this.$store.dispatch('user/findUserById', { id: this.userId })
      // this.form = {}
    },
    // 修改个人信息按钮
    toUpdate() {
      this.visible = true
      this.form = { ...this.current_d }
    },
    // 关闭模态框
    close() {
      this.form = {}
      this.visible = false
    }
  },
  created() {
    this.$store.dispatch('user/findUserById', { id: this.userId })
    // this.$store.dispatch('user/saveOrUpdate', { form: this.form })
  },
  mounted() {}
}
</script>
<style scoped>
</style>